<template>
  <div @click.stop="colClick(col, index, element)" :class="['cell-wrap', lowCode.currentKey == col.key ? 'active' : '']">
    <slot></slot>
    <div class="operations-group">
      <el-popover placement="top-start" v-model:visible="popoverVisible" :show-arrow="false" popper-class="popper-col"
        :width="30" trigger="hover">
        <template #reference>
          <i class="iconfont icon-kuaijiecaozuo" @click.stop="popoverVisible = true"></i>
        </template>
        <div class="button-group">
          <div @click="leftInsert">向左插入一列</div>
          <div @click="rightInsert">向右插入一列</div>
        </div>
      </el-popover>
    </div>
    <div class="up" @click.stop="findParent">
      <i class="iconfont icon-zhuanwan"></i>
    </div>
    <div class="remove" @click="remove">
      <i class="iconfont icon-shanchu"></i>
    </div>
  </div>
</template>

<script  lang="ts">
import { defineComponent, inject, nextTick, reactive, ref } from "vue";
import {
  CellImp,
  LowCodeImp,
  Component,
} from "@/components/low-code/core/index";
import { Cell } from "@/components/low-code/core/cell";
import { ElMessage } from "element-plus";
import { tools } from "@/components/low-code/page-designer/utils";
import clone from "clone";

export default defineComponent({
  props: ["col", "index", "element"],
  setup(props) {
    const getLowCodeInstance = inject("getLowCodeInstance") as Function;
    const lowCode = getLowCodeInstance() as LowCodeImp;
    const { col, index, element } = reactive(props);

    const findParent = () => {
      let parentKey = element.key;
      if (parentKey) {
        lowCode.dataCenter[parentKey]?.updateMetaRefresh();
      } else {
        lowCode.updateMetaRefresh();
      }
      nextTick(() => {
        lowCode.setcurrentKey(parentKey);
      });
    };

    const colClick = (element: any, index: any, parent: any) => {
      lowCode.currentKey = element.key;
      // lowCode.updateMetaRefresh();
    };

    const popoverVisible = ref(false);

    const leftInsert = () => {
      const cell: CellImp = new Cell(
        {
          type: "col",
          key: "",
          options: {
            span: 12,
            offset: 0,
          },
          items: [],
        },
        lowCode
      );
      if (index <= 0) {
        element.items.splice(0, 0, cell);
      } else {
        element.items.splice(index - 1, 0, cell);
      }

      lowCode.addComponent(cell);
      popoverVisible.value = false;
      tools.handleStack.push(clone(lowCode));
      (element as Component).updateMetaRefresh();
    };

    const rightInsert = () => {
      const cell: CellImp = new Cell(
        {
          type: "col",
          key: "",
          options: {
            span: 12,
            offset: 0,
          },
          items: [],
        },
        lowCode
      );
      element.items.splice(index + 1, 0, cell);
      lowCode.addComponent(cell);
      popoverVisible.value = false;
      tools.handleStack.push(clone(lowCode));
      (element as Component).updateMetaRefresh();
    };

    const remove = () => {
      element.items.splice(index, 1);
      lowCode.removeComponent(col.key);
      (element as Component).updateMetaRefresh();
      tools.handleStack.push(clone(lowCode));
    };

    return {
      lowCode,
      findParent,
      colClick,
      popoverVisible,
      leftInsert,
      rightInsert,
      remove,
    };
  },
});
</script>

<style scoped>
.drawing-board .cell-wrap {
  outline: 1px dashed #336699;
  padding-bottom: 10px;
  position: relative;
}

.drawing-board .el-col {
  height: fit-content;
}

.drawing-board .cell-wrap.active {
  outline: 2px solid #bb40ff;
}

.operations-group {
  width: 24px;
  line-height: 24px;
  text-align: center;
  position: absolute;
  right: 0px;
  bottom: -12px;
  cursor: pointer;
  display: none;
  z-index: 100;
  background: #ffebeb;
  color: #bb40ff;
  border-radius: 50%;
}

.active>.operations-group {
  display: block;
}

.up {
  width: 24px;
  line-height: 24px;
  text-align: center;
  position: absolute;
  right: 65px;
  bottom: -12px;
  cursor: pointer;
  display: none;
  z-index: 100;
  background: #c7ede3;
  color: #27c217;
  border-radius: 50%;
}

.remove {
  width: 24px;
  line-height: 24px;
  text-align: center;
  position: absolute;
  right: 32px;
  bottom: -12px;
  cursor: pointer;
  display: none;
  z-index: 100;
  background: #ffebeb;
  color: #fc5757;
  border-radius: 50%;
}

.active>.remove {
  display: block;
}

.active>.up {
  display: block;
}

.button-group div {
  color: rebeccapurple;
  cursor: pointer;
  line-height: 20px;
  font-size: 14px;
}
</style>

<style>
:deep(.popper-col) {
  border-color: rebeccapurple !important;
  min-width: 100px !important;
}

.el-popover.el-popper.popper-col {
  min-width: 150px !important;
}
</style>